<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>吉联科技</title>
    <link rel="stylesheet" href="css/unit.css"/>
    <link rel="stylesheet" href="components/header.css"/>
    <link rel="stylesheet" href="components/case.css"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="components/footer.css"/>
</head>
<body>
<div id="app">
    <header>
        <nav class="container">
            <img src="img/logo.png" alt=""/>
            <ul>
                <li><a  href="index.html">首页</a></li>
                <li><a href="jianjie.html">分部简介</a></li>
                <li><a href="product.html">硬件产品</a></li>
                <li><a href="card.html">软件产品</a></li>
                <li><a  class="active" href="case.html">成功案例</a></li>
                <li><a href="download.html">下载中心</a></li>
                <li><a href="contact.html">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <el-carousel :interval="5000" trigger="click" height='700px' >
        <el-carousel-item>
            <img src="img/banner1.jpg" alt=""/>
        </el-carousel-item>
        <el-carousel-item>
            <img src="img/banner2.jpg" alt=""/>
        </el-carousel-item>
    </el-carousel>

    <div class="container block1">
        <h2>案例分析</h2>
        <section>
            <div class="tabs">
                <div class="title">
                    成功案列
                </div>
                <ul>
                    <li @click="tab(index)" v-for="(item,index) in tabs" :class="[{active:index==tindex}]" >
                        {{item}} <span>></span>
                    </li>
                </ul>
            </div>
            <component :is='cun'></component>
        </section>
    </div>

    <footer>
        <div class="container foot">
            <div class="f_left">
                <ul>
                    <li>领航</li>
                    <li>微信订房</li>
                    <li>微信订餐</li>
                    <li>移动查房</li>
                    <li>OTA全接通</li>
                    <li>手机报表</li>
                </ul>

                <p>公司地址:成都市青羊区顺城大街308号冠城广场21B</p>
                <p>电话:4008-846-665 028-86723736 传真:028-86723736-801</p>
                <p>版权所有©2020四川吉联科技有限公司</p>
            </div>
            <ul class="f_right">
                <li>微信服务号</li>
                <li><img src="img/erweima.jpg" alt=""/></li>
            </ul>
        </div>
    </footer>
</div>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
<script>

    Vue.component('school',{
        template:` <aside>
    <ul>
    <li>
    <router-link :to="{name:'casedetail',params:{id:1}}">
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </router-link>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    <ul>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    </aside>`
    })

    Vue.component('company',{
        template:`<aside>
    <ul>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学公司</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    <ul>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    </aside>`
    })
    Vue.component('pack',{
        template:` <aside>
    <ul>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦停车场</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    <ul>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    <li>
    <img src="img/sc.jpg" alt="">
    <span>四川大学锦城学院</span>
    </li>
    </ul>
    </aside>
    `
    })

    new Vue({
        el: '#app',
        data (){
        return {
            tindex:0,
            tabs:['学校','公司','停车场'],
            cun:'school',
            coms:['school','company','pack']
        }
    },
    methods:{
        tab(index){
            this.tindex=index;
            this.cun=this.coms[index];
        }
    }
    })




</script>

















